<template>
	<div>
		<h1>product</h1>
		<template :data="seach" >
			<el-input placeholder="请输入内容" v-model="seach" clearable width="100"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="search(seach)"></el-button>
		</template>
		<p>

		</p>
		<el-button type="primary" @click="dakaidio">添加学员</el-button>
		<el-button plain icon="iconfont icon-excel" @click="exportExcel">导出excel</el-button>
		<Dialog ref="digg" :visible="visible" @open="opendialog" @close="closedialog"></Dialog>

		<!-- 表格部分 -->
		  <el-table	:data="getForm" border stripe style="width: 100%" v-loading="loading">
			<el-table-column prop="headimgurl" label="头像" width="120">
				<template v-slot="{row}">
					<el-avatar :size="60" :src="row.headimgurl" shape="square" ></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120"></el-table-column>
			<el-table-column prop="age" label="年龄" width="140"></el-table-column>
			<el-table-column prop="degree" label="学历" width="140"></el-table-column>
			<el-table-column prop="productUrl" label="项目" width="140"></el-table-column>
			<el-table-column prop="cTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" >
				<template v-slot="{row}">
					  <el-button type="primary" plain @click="tiaoxyzl(row)">查看</el-button>
					  <el-button type="primary" plain @click="bianj(row)">编辑</el-button>
					  <el-button type="danger" plain @click="del(row.sId)">删除</el-button>
				</template>
			</el-table-column>
		  </el-table>
		<!-- 表格部分 -->

		<!-- 分页 -->
		<el-pagination background layout="prev, pager, next"  :total="total" @current-change="currentPage"></el-pagination>
		<!-- 分页 -->
	</div>
</template>
<script>
import * as api from '@/api/stu/index'
import Dialog from '@/pages/Dialog/index.vue'
import qee from "qf-export-excel"
import { mapMutations } from 'vuex'

	export default {
		meta: {
			title: "xyxmgl",
			name: '学员项目管理',
			icon: "iconfont icon-shangpinguanli",
		},

		created(){
			this.studa()
		},

		data(){
			return{
				seach:'',
				total:0,

				visible:false,

				// 指定返回数据的条数
				stuc:{
					page:1,
					count:5
				},

				loading:false,


			getForm:[]
			}
		},

		components:{
			Dialog
		},

		methods:{
			...mapMutations('stumess',['STUFORMES']),

			dakaidio(){
				this.$refs.digg.titname = '添加学员信息'
				// console.log(this.$refs.digg);
				this.$refs.digg.ruleForm = {}
				this.visible = true
			},
			opendialog(){
				console.log('opendialog')
				this.visible = false
			},


			closedialog(dataa){

				let titlena = this.$refs.digg.titname

				if(titlena === '添加学员信息'){
					api.addtext(dataa)
					.then(res=>{
						console.log('res---',res);
					})
				}else if(titlena === '修改学员信息'){
				api.xiugai(dataa)
				.then(res=>{
					console.log('编辑确定',res);
					if(res.data.state){
						this.$message.success(res.data.msg)
					}
				})
				}


				
				// console.log('one---',dataa);
				this.visible = false
				this.studa()

			},

			studa(count = 5, page = 1, classes){
				this.loading = true

				api.stutext(count, page, classes)
				.then(res =>{
					console.log('table--',res);
					
				this.getForm = res.data.data
				this.total = res.data.total
				this.loading = false
				})
			},

			// 编辑事件
			bianj(shuj){
				console.log('row---',shuj);
				// console.log(this.$refs.digg.ruleForm);
				this.$refs.digg.ruleForm = {...shuj}
				this.$refs.digg.titname = '修改学员信息'
				this.visible = true
			},

			// 删除事件
			del(txt){
				this.$confirm('是否确认删除该条信息','删除提醒')
				.then(()=>{
					api.deltxt(txt)
				.then(res=>{
					console.log('删除--',res);
					this.studa()
				})
				})
				.catch(()=>{
					this.$message.error('已取消删除')
				})
				
			},


			// 点击下一页事件
			currentPage(r){
				console.log(r);
				this.studa(undefined,r)
			},

			 //导出excel
        exportExcel() {
            //导出的字段有哪些
            let titleList = [{
                title: '头像地址',
                key: 'headimgurl'
            }, {
                title: '名字',
                key: 'name'
            }, {
                title: '项目',
                key: 'productUrl'
            }]

            qee(titleList, this.getForm, '2205项目')

        },


		// 搜索框
		search(ro){
			console.log('搜索框',ro);
			api.search(ro)
			.then(res=>{
				console.log('ss',res);
				this.getForm = res.data.data
			})
		},

		tiaoxyzl(row){
			this.$router.push('/studentmanager/studentprofile')
			console.log('row---',row);
			this.STUFORMES(row)
		}
		}
	};
</script>

<style lang="less" scoped>
.el-input{
	width: 400px;
}
</style>